<template>
  <div class="home-page" :class="{ 'page-loaded': pageLoaded, [screenClass]: true, [highDpiClass]: true }" :style="containerStyle">
    <!-- 顶部头部区域 -->
    <AppHeader />
    <AppMainNav />

    <div class="main-container">
      <!-- 顶部三栏区域：左侧分类 + 轮播图 + 右侧公告 -->
      <div class="top-section">
        <!-- 左侧分类菜单 -->
        <div class="left-sidebar">
          <CategoryMenu />
        </div>

        <!-- 中间轮播图 -->
        <div class="center-banner">
          <HomeBanner />
        </div>

        <!-- 右侧公告+登录区 -->
        <div class="right-sidebar">
          <NoticePanel />
        </div>
      </div>

      <!-- 产品分类轮播 -->
      <div class="category-section">
        <CategoryCarousel />
      </div>

      <!-- 热门产品区 -->
      <div class="product-section">
        <HotProducts />
      </div>

      <!-- 土产专区 -->
      <div class="local-section">
        <LocalProducts />
      </div>

      <!-- 出口热卖区 -->
      <div class="export-section">
        <ExportProducts />
      </div>

      <!-- 昌欣集市区 -->
      <div class="bazaar-section">
        <MarketBazaar />
      </div>

      <!-- 工厂产品区 -->
      <div class="factory-section">
        <FactoryProcurementHome />
      </div>

      <!-- 找货专区 -->
      <div class="find-goods-section">
        <FindGoods />
      </div>

          <!-- 行业活动区 -->
          <div class="industry-activities-section">
            <IndustryActivities />
          </div>

          <!-- 昌欣快报区 -->
          <div class="changxin-express-section">
            <ChangxinExpress />
          </div>

      <!-- 技术交流区 -->
      <div class="tech-exchange-section">
        <TechExchange />
      </div>

      <!-- 平台服务区 -->
      <div class="platform-services-section">
        <PlatformServices />
      </div>
        </div>

    <!-- 页脚 -->
    <AppFooter />

    <!-- 悬浮菜单 -->
    <FloatingMenu />
  </div>
</template>

<script setup>
// 首页逻辑
definePageMeta({
  layout: false
})

const pageLoaded = ref(false)
const { screenInfo, layoutConfig, is4K, is5K, isUltraWide, screenClass, highDpiClass } = useScreenAdaptation()

onMounted(() => {
  // 页面加载完成后添加动画效果
  setTimeout(() => {
    pageLoaded.value = true
  }, 100)
  
  // 根据屏幕类型调整页面布局
  console.log('当前屏幕类型:', screenInfo.value.type)
  console.log('布局配置:', layoutConfig.value)
})

// 动态计算容器样式
const containerStyle = computed(() => {
  const config = layoutConfig.value
  
  return {
    '--container-max-width': `${config.containerMaxWidth}px`,
    '--sidebar-width': `${config.sidebarWidth}px`,
    '--right-sidebar-width': `${config.rightSidebarWidth}px`,
    '--base-font-size': `${config.fontSize}px`,
    '--base-spacing': `${config.spacing}px`
  }
})
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixins.scss";

.home-page {
  background: #f5f5f5;
  min-height: 100vh;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  
       &.page-loaded {
             // 暂时移除动画，确保内容显示
       }
  
    .main-container {
      @include container-width;
      padding: 0 20px;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      margin-left: auto;
      margin-right: auto;
      
      // 4K和5K屏幕的缩放由全局样式处理
    }

  .top-section {
    display: flex;
    gap: 15px;
    margin-bottom: $spacing-lg;

    @include tablet {
      flex-direction: column;
      gap: $spacing-md;
    }

    @include mobile {
      flex-direction: column;
      gap: $spacing-sm;
    }

    .left-sidebar {
      width: 210px;
      flex-shrink: 0;

      @include tablet {
        width: 100%;
      }
    }

    .center-banner {
      flex: 1;
      min-width: 0;

      @include tablet {
        width: 100%;
      }
    }

    .right-sidebar {
      width: 310px;
      flex-shrink: 0;

      @include tablet {
        width: 100%;
      }
    }
  }

    .category-section,
    .product-section,
    .factory-section,
    .local-section,
    .export-section,
    .find-goods-section,
    .industry-activities-section,
    .changxin-express-section,
    .tech-exchange-section,
    .platform-services-section,
    .data-stats-section {
      margin-bottom: 18px;
    }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes slideUpFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>


